<template>
  <div>
    <div class="viewTitle">配送单信息</div>
    <a-list-info
      :infoDatas="infoDatas"
      span="12"
      :haveBarCode="true"
      :BarCode="BarCode"
    />
    <div class="viewTitle">配送单明细</div>
    <table
      style="width:100%"
      class="printTableBorder"
      border="1"
      cellspacing="0"
      cellpadding="0"
    >
      <tr class="tHeader">
        <th
          v-for="item in columns"
          :key="item.key"
          :style="{width:item.width}"
        >{{item.title}}</th>
      </tr>
      <tr
        class="tRow"
        v-for="items in listdata"
        :key="items.pid"
      >
        <td
          v-for="item in columns"
          :key="item.key"
          style="width:500px"
        >{{items[item.dataIndex]}}</td>
      </tr>
    </table>
    <div
      class="nothing printTableBorder"
      v-if="!listdata.length"
    >暂无数据</div>
    <!-- <div class="uTable">
      <a-row type="flex" class="uHeader">
        <a-col class="uCol"  v-for="item in columns" :key="item.key" :flex="item.width">
          {{item.title}}
        </a-col>
      </a-row>
      <a-row type="flex" class="uRow"  v-for="items in listdata" :key="items.pid">
        <a-row type="flex" style="borderTop: 1px solid #666;borderBottom: 1px solid #666;width:100%;">
          <a-col  
            class="uCol" 
            v-for="item in columns" 
            :key="item.key"
            :flex="item.width"
          >{{items[item.dataIndex]}}</a-col>
        </a-row>
        <a-row class="innerTable">
          <table style="width:100%"  v-if="items.child.length" class="printTableBorder" border="1" cellspacing="0" cellpadding="0">
              <tr class="tHeader">
                  <th v-for="item in innerColumns"   :key="item.key" :style="{width:item.width}">{{item.title}}</th>
              </tr>
              <tr class="tRow"  v-for="items in items.child" :key="items.pid">
                <td 
                    v-for="item in innerColumns" 
                    :key="item.key"
                    style="width:500px" 
                >{{items[item.dataIndex]}}</td>
              </tr> 
          </table>
          <div class="nothing printTableBorder" v-else>暂无数据</div>
        </a-row>
      </a-row>
      <a-row>
        <div class="nothing printTableBorder" v-if="!listdata.length">暂无数据</div>
      </a-row>
    </div> -->
    <div class="viewTitle">发票信息</div>
    <table
      style="width:100%;"
      class="printTableBorder"
      border="1"
      cellspacing="0"
      cellpadding="0"
    >
      <tr class="tHeader">
        <th
          v-for="item in columns2"
          :key="item.key"
          :style="{width:item.width}"
        >{{item.title}}</th>
      </tr>
      <tr
        class="tRow"
        v-for="items in listdata2"
        :key="items.pid"
      >
        <td
          v-for="item in columns2"
          :key="item.key"
          style="width:500px"
        >{{items[item.dataIndex]}}</td>
      </tr>
    </table>
    <div
      class="nothing printTableBorder"
      v-if="!listdata2.length"
    >暂无数据</div>
  </div>
</template>

<script>
import aListTable from '@/views/app/biz/common/aListTable'
import aListInfo from '@/views/app/biz/common/aListInfo'

import {
  getMergeOrder,
} from './saleDelivery'

export default {
  props: {
    infoDatas: {
      type: Array
    },
    BarCode: {
      type: String,
      default: null
    },
    // columns: {
    //   type: Array
    // },
    // columns2: {
    //   type: Array
    // },
    listdata: {
      type: Array
    },
    listdata2: {
      type: Array
    },
  },
  components: {
    aListInfo
  },
  data () {
    return {
      nodata: [],
      columns: [
        { title: '品名', dataIndex: 'productNameZh', key: 'productNameZh', width: "14%", align: 'center', },
        { title: '通用名', dataIndex: 'commonName', key: 'commonName', align: 'center' },
        { title: '生产企业名称', dataIndex: 'manufacturerZh', key: 'manufacturerZh', width: "15%", align: 'center', },
        { title: '规格', dataIndex: 'spec', key: 'spec', width: "10%", align: 'center' },
        // { title: '型号', dataIndex: 'model', key: 'model', width:"10%",align: 'center' },
        { title: '计量单位', dataIndex: 'measurement', key: 'measurement', width: "4%", align: 'center' },
        { title: '单价(元)', dataIndex: 'iunitprice', key: 'iunitprice', width: "6%", align: 'center', scopedSlots: { customRender: 'iunitprice' } },
        { title: '批号', dataIndex: 'batchCode', key: 'batchCode', align: 'center' },
        { title: '生产日期', dataIndex: 'productDate', key: 'productDate', align: 'center' },
        { title: '有效期', dataIndex: 'expiryDate', key: 'expiryDate', align: 'center' },
        { title: '配送数量', dataIndex: 'num', key: 'num', align: 'center', scopedSlots: { customRender: 'num' } },
        { title: '总价(元)', dataIndex: 'totalPrice', key: 'totalPrice', width: "10%", align: 'center', scopedSlots: { customRender: 'totalPrice' } },
        { title: '状态', dataIndex: 'deliveryState', key: 'deliveryState', width: "10%", align: 'center' }
      ],
      innerColumns: [
        { title: '供应商销售单号', dataIndex: 'saleOrderNo', key: 'saleOrderNo', width: "10%", align: 'center', },
        { title: '客户采购单号', dataIndex: 'purOrderNo', key: 'purOrderNo', width: "10%", align: 'center', },
        { title: '品名', dataIndex: 'productNameZh', key: 'productNameZh', width: "10%", align: 'center', },
        { title: '通用名', dataIndex: 'commonName', key: 'commonName', width: "10%", align: 'center' },
        { title: '生产企业名称', dataIndex: 'manufacturerZh', key: 'manufacturerZh', width: "10%", align: 'center', },
        { title: '规格', dataIndex: 'spec', key: 'spec', width: "10%", align: 'center' },
        { title: '计量单位', dataIndex: 'measurement', key: 'measurement', width: "10%", align: 'center' },
        { title: '单价(元)', dataIndex: 'iunitprice', key: 'iunitprice', width: "5%", align: 'center', scopedSlots: { customRender: 'iunitprice' } },
        { title: '批号', dataIndex: 'batchCode', key: 'batchCode', width: "10%", align: 'center', scopedSlots: { customRender: 'batchCode' } },
        { title: '配送数量', dataIndex: 'num', key: 'num', width: "5%", align: 'center', scopedSlots: { customRender: 'num' } },
        { title: '生产日期', dataIndex: 'productDate', key: 'productDate', width: "10%", align: 'center', scopedSlots: { customRender: 'productDate' } },
        { title: '有效期', dataIndex: 'expiryDate', key: 'expiryDate', width: "10%", align: 'center', scopedSlots: { customRender: 'expiryDate' } },
        { title: '状态', dataIndex: 'deliveryState', key: 'deliveryState', align: 'center' }
      ],
      columns2: [
        // { title: '结算单号', dataIndex: 'settlementNo', key: 'settlementNo',width:"10%", align: 'center' },
        { title: '买方单位', dataIndex: 'customerName', key: 'customerName', width: "10%", align: 'center' },
        { title: '发票种类', dataIndex: 'invoiceType', key: 'invoiceType', width: "10%", align: 'center' },
        { title: '发票号码', dataIndex: 'invoiceNo', key: 'invoiceNo', width: "10%", align: 'center' },
        { title: '发票代码', dataIndex: 'invoiceCode', key: 'invoiceCode', width: "10%", align: 'center' },
        { title: '含税总价', dataIndex: 'totalPrice', key: 'totalPrice', width: "10%", align: 'center' },
        { title: '税率', dataIndex: 'tax', key: 'tax', width: "10%", align: 'center' },
        { title: '状态', dataIndex: 'invoiceState', key: 'invoiceState', width: "10%", align: 'center' },
      ],
      sData: {
        purOrderPid: null
      },
      pagination: {
        //分页配置
        current: 1, //当前页码 current
        pageSize: 100000 //每页显示条数 pageSize
      },
    }
  },
  mounted () {
  },
  methods: {

  }
}
</script>

<style >
html {
  height: 99vh;
}

.uTable {
  border: 1px solid #666;
}
.uHeader {
  width: 100%;
  background-color: rgba(161, 174, 187, 0.431);
}
.uHeader .uCol {
  min-height: 47px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bolder;
  padding: 5px;
}
.uRow {
  width: 100%;
  background-color: #fff;
}
.uRow .uCol {
  min-height: 37px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5px;
}
.innerTable {
  min-height: 30px;
  width: 100%;
  padding: 5px 10px;
  background-color: rgba(161, 174, 187, 0.287);
}
.tHeader {
  width: 100%;
  min-height: 40px;
  background-color: #eee;
}
.tHeader th {
  text-align: center;
  padding: 5px;
}
.tRow {
  width: 100%;
  min-height: 30px;
  background-color: #fff;
}
.tRow td {
  text-align: center;
  padding: 5px;
}
.nothing {
  margin-top: 5px;
  height: 100px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(234, 240, 241, 0.507);
}
</style>
